.tabs {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;


    .tab_head {

        margin-top: 50rpx;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        background-color: #f2f2f2;
        border-radius: 10rpx;

        .tab_head_item {

            font-size: 30rpx;
            text-align: center;
            line-height: 100rpx;
            width: 195rpx;
            border-radius: 10rpx;
            height: 100rpx;
            transition: all 0.3s;
            border-left: 10rpx solid #f2f2f2;
        }

        .tab_head_item.active {

            font-weight: 700;
            border-left: 10rpx solid #fa6650;
            box-shadow: 3rpx 5rpx 4rpx rgba(0, 0, 0, 0.3);
        }
    }

    .tab_body {

        margin-left: 30rpx;


        .tab_body_item {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-around;
            margin-bottom: 40rpx;

            .food_type_title {
                font-weight: 700;
                font-size: 35rpx;
                margin: 0 0 10rpx 10rpx;
            }

            .food_type_dishList {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;

                .food_type_dish {
                    width: 160rpx;
                    height: 160rpx;
                    position: relative;
                    border-radius: 20rpx;
                    overflow: hidden;
                    margin: 0 12rpx 12rpx 0;
                    background-color: #fafaf8;

                    image {
                        width: 100%;
                        height: 100%;
                    }

                    text {
                        width: 100%;
                        font-weight: 700;
                        color: #ffffff;
                        font-size: 30rpx;
                        text-align: center;
                        position: absolute;
                        bottom: 6rpx;
                        z-index: 1;
                        right: 0;
                    }

                    .cover {
                        position: absolute;
                        width: 100%;
                        height: 60rpx;
                        bottom: 0;
                        left: 0;
                        pointer-events: none;
                        /* Allows clicks to pass through */
                        background: linear-gradient(to top, rgba(183, 177, 160, 1), rgba(183, 177, 160, 0.1));
                        backdrop-filter: blur(1rpx);

                    }

                }
            }
        }
    }
}